import { Pie } from '@ant-design/plots';
import { useRequest } from '@umijs/max';
import React, { PropsWithChildren } from 'react';
import { productDataAnalysis } from './service';

interface TypeDistributionProps extends PropsWithChildren {
    height?: number | string
}

const TypeDistribution: React.FC<TypeDistributionProps> = ({
    height
}) => {
    const { data } = useRequest(() => {
        return productDataAnalysis({})
    })

    const chartComStyle = {
        axis: {
            x: {
                labelFill: '#fff',
            },
            y: {
                labelFill: '#fff',
            },
        },
        legend: {
            color: {
                title: false,
                position: 'right',
                rowPadding: 5,
                itemLabelFill: '#fff'
            },
            size: {},
        },
        height: height,
    }

    const config = {
        data: [
            { type: '总申请量', value: data?.applyCount },
            { type: '总浏览量', value: data?.pvCount },
            { type: '总搜索量', value: data?.searchCount },
        ],
        angleField: 'value',
        colorField: 'type',
        tooltip: {
            items: [{ channel: 'y', name: '总量' }],
        },
        label: {
            text: 'value',
            style: {
                fontWeight: 'bold',
            },
        },
        ...chartComStyle
    };
    return <Pie {...config} />;
};

export default TypeDistribution
